<script lang="ts" setup>
import { TableColumn } from '@/types/table'
import { Table } from '@/components/Table/index'
import MountContentForm from './mount-content-form.vue'
import * as ItemApi from '@/api/course/item'

const dialogVisible = ref(false)
const dialogTitle = ref('新增课程')
const courseId = ref('')
const catalogId = ref('')

/** 表格字段 */
const columns: TableColumn[] = [
  {
    field: 'itemName',
    label: '条目名称'
  },
  {
    field: 'itemDesc',
    label: '条目描述'
  },
  {
    field: 'courseItemType',
    label: '类型',
    formatter: (_row, _collumn, value) => ItemApi.CourseItemTypeMap[value]
  },
  {
    field: 'courseItemTypeId',
    label: '绑定id'
  },
  {
    field: 'isFree',
    label: '免费试看',
    formatter: (_row, _collumn, value) => (value ? '是' : '否')
  },
  {
    field: 'itemStatus',
    label: '状态',
    formatter: (_row, _collumn, value) => ItemApi.CourseItemStatusMap[value]
  },
  {
    field: 'sortNo',
    label: '排序'
  },
  {
    field: 'action',
    label: '操作'
  }
]

/** 表格相关方法 */
const {
  register: tableRegister,
  tableObject,
  tableMethods
} = useTable({
  getListApi: async () => {
    // 调用接口获取直播列表
    const res = await ItemApi.getListByCatalogId(catalogId.value)

    return {
      list: res
    }
  },
  delListApi: async (option) => {
    await ItemApi.deleteById(option)
    return {}
  }
})
const { getList, delList } = tableMethods

const open = (_courseId: string, _catalogId: string) => {
  dialogVisible.value = true
  dialogTitle.value = '内容挂载'
  courseId.value = _courseId
  catalogId.value = _catalogId
  getList()
}
defineExpose({ open })

/** 挂载内容操作 */
const mountContentFormRef = ref()
const openMountContentForm = (type: string, id?: string) => {
  mountContentFormRef.value.open(type, courseId.value, catalogId.value, id)
}
</script>

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%">
    <ContentWrap>
      <el-button
        type="primary"
        @click="openMountContentForm('create')"
        v-hasPermi="['train:course:create']"
      >
        <Icon icon="ep:plus" class="mr-5px" /> 添加
      </el-button>
    </ContentWrap>

    <ContentWrap>
      <Table
        @register="tableRegister"
        :columns="columns"
        :data="tableObject.tableList"
        row-key="id"
        :loading="tableObject.loading"
        v-model:pageSize="tableObject.pageSize"
        v-model:currentPage="tableObject.currentPage"
        border
      >
        <template #action="scope">
          <el-button link type="primary" @click="openMountContentForm('update', scope.row.id)"
            >编辑</el-button
          >
          <el-button link type="danger" @click="delList(scope.row.id, false)">删除</el-button>
        </template>
      </Table>
    </ContentWrap>
  </Dialog>

  <!-- 内容挂载弹窗 -->
  <MountContentForm ref="mountContentFormRef" @success="getList" />
</template>
